import 'package:bxultimate/app/theme/app_theme.dart';
import 'package:bxultimate/app/theme/gaps.dart';
import 'package:bxultimate/data/store/config_store.dart';
import 'package:bxultimate/widgets/mk_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'controller.dart';

class ShopDetailPage extends StatefulWidget {
  const ShopDetailPage({Key? key}) : super(key: key);

  @override
  State<ShopDetailPage> createState() => _ShopDetailPageState();
}

class _ShopDetailPageState extends State<ShopDetailPage> {
  final controller = Get.find<ShopDetailController>();
  final state = Get.find<ShopDetailController>().state;

  @override
  Widget build(BuildContext context) {
    return MkPage(
      child: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            floating: true,
            backgroundColor: Colors.transparent,
            expandedHeight: 190,
            flexibleSpace: _buildHead(),
          ),
          SliverFillRemaining(
            child: SingleChildScrollView(
              child:_buildBody(),
            ),
          )
        ],
      ),
    );
  }

  _buildHead() {
    return Obx(() => state.shop.shopPhoto == null
        ? SizedBox()
        : Container(
            height: 240,
            child: Swiper(
              autoplay: true,
              itemCount: state.shop.shopPhoto!.length,
              loop: true,
              pagination: const SwiperPagination(
                  alignment: Alignment.bottomCenter,
                  builder: TDSwiperPagination.dotsBar),
              itemBuilder: (BuildContext context, int index) {
                return TDImage(
                  imgUrl:
                      ConfigStore.to.baseFileUrl + state.shop.shopPhoto![index],
                );
              },
            ),
          ));
  }

  _buildBody() {
    TextStyle textStyle = TextStyle(color: Color(0xFF606266));
    return Padding(
      padding: EdgeInsets.only(
          left: AppTheme.iDefaultPadding, right: AppTheme.iDefaultPadding,bottom: 30),
      child: Obx(()=>Column(
        children: [
          Container(
            padding: EdgeInsets.all(AppTheme.iDefaultPadding),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(AppTheme.iDefaultPadding),
            ),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('${state.shop.name}',
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold)),
                  ],
                ),
                Gaps.vGap8,
                Row(
                  children: [
                    Text(
                      "${state.shop.scoreAvg}分",
                      style: textStyle,
                    ),
                    Gaps.hGap8,
                    Text(
                      "12km",
                      style: textStyle,
                    ),
                    Gaps.hGap8,
                    Text(
                      "2226",
                      style: textStyle,
                    )
                  ],
                )
              ],
            ),
          ),
          Gaps.vGap8,
          Container(
            padding: EdgeInsets.all(AppTheme.iDefaultPadding),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(AppTheme.iDefaultPadding),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "${state.shop.phone}",
                      style: TextStyle(fontSize: 14),
                    ),
                    Gaps.vGap8,
                    Text(
                      "${state.shop.address}",
                      style: textStyle.copyWith(fontSize: 14),
                    )
                  ],
                ),
                Row(
                  children: [
                    IconButton(onPressed: () {}, icon: Icon(Icons.call)),
                    IconButton(onPressed: () {}, icon: Icon(Icons.navigation))
                  ],
                )
              ],
            ),
          ),
          Gaps.vGap8,
          Container(
            width: double.infinity,
            padding: EdgeInsets.all(AppTheme.iDefaultPadding),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(AppTheme.iDefaultPadding),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "商家优惠",
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                ),
                Gaps.vGap8,
                state.shop.shopDiscountList == null
                    ? SizedBox()
                    : Column(
                    children: state.shop.shopDiscountList!
                        .map((e) => Padding(
                      padding: EdgeInsets.only(bottom: 8),
                      child: Row(
                        mainAxisAlignment:
                        MainAxisAlignment.spaceBetween,
                        children: [
                          TDTag(
                            "${e.discountName}",
                            theme: TDTagTheme.primary,
                            isOutline: true,
                            size: TDTagSize.small,
                          ),
                          Gaps.hGap8,
                          Text(
                            "${e.discount} 折优惠",
                            style: textStyle,
                          )
                        ],
                      ),
                    ))
                        .toList())
              ],
            ),
          ),
          Gaps.vGap8,
          Container(
            width: double.infinity,
            padding: EdgeInsets.all(AppTheme.iDefaultPadding),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(AppTheme.iDefaultPadding),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "店铺描述",
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                ),
                Gaps.vGap8,
                Text("${state.shop.description}")
              ],
            ),
          ),
          Gaps.vGap8,
          Container(
            width: double.infinity,
            padding: EdgeInsets.all(AppTheme.iDefaultPadding),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(AppTheme.iDefaultPadding),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "店铺评价",
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                ),
                Text(
                  "${state.shop.scoreAvg}分",
                  style: TextStyle(fontSize: 16),
                ),
              ],
            ),
          )
        ],
      )),
    );
  }

  @override
  void dispose() {
    Get.delete<ShopDetailController>();
    super.dispose();
  }
}
